<template>
  <div class="login">
    <h1>登录</h1>
    <form @submit.prevent="login">
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" id="username" v-model="formData.username" required>
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" id="password" v-model="formData.password" required>
      </div>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
// 从 vue 库中导入 ref 函数，用于创建响应式数据
import { ref } from 'vue'

export default {
  name: 'Login',// 组件名称为 Login
  setup() {
    const formData = ref({
       // 使用 ref 创建一个响应式对象 formData，包含 username 和 password 两个属性，初始值为空字符串
      username: '',
      password: ''
    })
    // 登录方法，处理表单提交逻辑
    const login = () => {
      // 从 localStorage 中获取存储的用户列表，如果不存在则返回空数组
      const users = JSON.parse(localStorage.getItem('users') || '[]')
       // 查找是否存在与当前输入用户名和密码都匹配的用户
      const user = users.find(u => u.username === formData.value.username && u.password === formData.value.password)
      if (user) {
        // 如果用户存在，将登录状态设置为 true 并存储到 localStorage 中
        localStorage.setItem('isLoggedIn', 'true')
         // 将当前用户名存储到 localStorage 中
        localStorage.setItem('currentUser', formData.value.username)
        alert('登录成功！')
        window.location.href = '/'
      } else {
        alert('用户名或密码错误！')
      }
    }
     // 将 formData 和 login 方法返回，以便在模板中使用
    return {
      formData,
      login
    }
  }
}
</script>

<style scoped>
.login {
  text-align: left;
}
/* 表单组样式，底部边距为 15px */
.form-group {
  margin-bottom: 15px;
}
/* 表单组标签样式，显示为块级元素，底部边距为 5px */
.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
}
/* 按钮悬停样式，背景颜色变深 */
button:hover {
  background-color: #45a049;
}
</style>